<template>
  <div class="namebox">
    <span class="type">品牌</span>
    <span
      v-for="item in brand"
      :key="item"
      @click="getbrandid(item.brand_id)"
      :class="{ select: item.brand_id == ID.brandID }"
      >{{ item.brand_name }}</span
    >
  </div>
  <div class="namebox">
    <span class="type">种类</span>
    <span
      v-for="item in categoryarr"
      :key="item"
      @click="getcategoryid(item.category_id)"
      :class="{ select: item.category_id == ID.categoryID }"
      >{{ item.category_name }}</span
    >
  </div>
  <div class="wk">
    <div class="brandhotimg">
      <div
        v-for="(item, index) in Product"
        :key="index"
        class="card"
        @click="$store.dispatch('goproductsellpage', item.product_id)"
      >
        <img
          :src="`http://localhost:3001/${item.product_picture}`"
          class="image"
        />
        <div style="padding: 14px">
          <div class="time">{{ item.product_name + item.product_intro
}}</div>
          <div class="pricebox">
            <div class="price">￥{{ item.product_selling_price }}</div>
            <div class="sellprice">￥{{ item.product_price }}</div>
          </div>
        </div>
        <div class="monthsell">月销量：{{ item.product_sales }}+</div>
      </div>
    </div>
  </div>

  <div class="example-pagination-block">
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="10"
      @current-change="pagechange($event)"
      background
    />
  </div>
</template>


<script setup>
import {
  categoryApi,
  brandApi,
  usecategoryidApi,
  usebrandidApi,
  usebrandandcatidApi,
  allproductApi,
} from "../../api/goods.js";
import { computed, onMounted, reactive, ref, watch } from "vue";

onMounted(() => {
  getcategory();
  getbrand();
});
let ID = reactive({
  brandID: 0,
  categoryID: 0,
});
let Product = ref([]);
let categoryarr = ref([]);
let brand = ref([]);
let total = ref(0);

const getcategory = async () => {
  let data = await categoryApi();
  categoryarr.value = data.category;
};
const getbrand = async () => {
  let data = await brandApi();
  brand.value = data.brand;
};
const getbrandid = (id) => {
  if (ID.brandID == id) {
    ID.brandID = 0;
    if (ID.categoryID != 0) {
      byidgetcatcegory();
    } else {
      getallproduct();
    }
  } else {
    ID.brandID = id;
    if (ID.categoryID == 0) {
      byidgetbrand();
    } else {
      bytwoid();
    }
  }
};
const getcategoryid = async (id) => {
  if (ID.categoryID == id) {
    ID.categoryID = 0;
    if (ID.brandID != 0) {
      byidgetbrand();
    } else {
      getallproduct();
    }
  } else {
    ID.categoryID = id;
    if (ID.brandID == 0) {
      byidgetcatcegory();
    } else {
      bytwoid();
    }
  }
};

const byidgetcatcegory = async (index = 1) => {
  let data = await usecategoryidApi(ID.categoryID, index);

  Product.value = data.Product;
  total.value = data.total;
};
const byidgetbrand = async (index = 1) => {
  let data = await usebrandidApi(ID.brandID, index);

  Product.value = data.Product;
  total.value = data.total;
};
const bytwoid = async () => {
  let data = await usebrandandcatidApi(ID.brandID, ID.categoryID);
  Product.value = data.Product;
  total.value = 0;
};
const pagechange = (e) => {
  if (ID.brandID == 0 && ID.categoryID != 0) {
    byidgetcatcegory(ID.categoryID, e);
  } else if (ID.brandID != 0 && ID.categoryID == 0) {
    byidgetbrand(ID.brandID, e);
  } else {
    getallproduct(e);
  }
};

const getallproduct = async (e) => {
  let data = await allproductApi(e);
  Product.value = data.Product;
  total.value = data.total;
  console.log("product", data);
};
getallproduct();
</script>


<style lang="less" scoped>
@wordcolor: #9b9b9b;
.namebox {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  align-items: center;
  // border:1px solid black;
}
.type {
  padding: 10px;
  background-color: #e9e9eb;
  border-radius: 10px;
}
.select {
  color: #ffd048;
}

.brandhotimg {
  display: flex;
  flex-flow: wrap;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 99%;
  //margin: 20px;
  // justify-content: space-between;
  //flex-grow: 1;
  .monthsell{
    
    padding:10px;
    border-top:1px solid #f2f2f2;
    color:@wordcolor;
    float: right;
    
  }
}
.image {
  width: 300px;
  height: 350px;
  display: block;
}
.card {
  margin: 50px;
  position: relative;
  border: 1px solid #f2f2f2;
}
.time {
  margin: 5px 0;
 text-align: left;
  overflow: hidden;
  font-size: 20px;
  color: @wordcolor;
 width: 275px;
 height: 53px;
}

.example-pagination-block {
  display: flex;
  justify-content: center;
}
.pricebox {
  display: flex;
// justify-content: center;
  // position: absolute;
  // // bottom: 1%;
  // left: 50%;
  // transform: translateX(-50%);

  .price {
    color: #fd3f31;
    font-size: 24px;
  }
  .sellprice {
    color: @wordcolor;
    font-size: 22px;
    text-decoration-line: line-through;
  }

}
</style>